<template>
    <!--自动发送-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('collection.autoSend')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="smsType"><!--模板名称-->
                            <el-select v-model="form.smsType" :placeholder="$t('collection.templateName')" clearable style="width:100%;">
                                <el-option v-for="item in allTemplate" :key="item.smsType" :value="item.smsType" :label="item.smsType"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="nodeName"><!--节点名称-->
                            <el-select v-model="form.nodeName" :placeholder="$t('common.nodeName')" clearable style="width:100%;">
                                <el-option v-for="item in allTemplate" :key="item.smsType" :value="item.nodeName" :label="item.nodeName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" @giveParentData="getAppList" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="status">
                            <el-select v-model="form.status" clearable :placeholder="$t('common.status')" style="width: 100%"><!--状态-->
                                <el-option key="0" :label="$t('collection.closed')" :value="0"></el-option>
                                <el-option key="1" :label="$t('collection.activated')" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="changeChannel" type="primary">{{ $t('common.changeChannel') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                        <el-table-column align="left" prop="smsType" :label="$t('collection.templateName')" min-width="120"></el-table-column><!--模板名称-->
                        <el-table-column align="left" prop="nodeName" :label="$t('common.nodeName')" min-width="120"></el-table-column><!--节点名称-->
                        <el-table-column align="left" prop="smsChannel" :label="$t('common.sendChannel')" min-width="120"></el-table-column><!--发送渠道-->
                        <el-table-column align="left" prop="content" :label="$t('collection.templateContent')" min-width="180">
                            <template slot-scope="scope">
                              <div class="edit_remark">
                                  <span v-if="!scope.row.content || (scope.row.content && scope.row.content.length <= 40)">{{ scope.row.content }}</span>
                                  <el-popover v-if="scope.row.content && scope.row.content.length > 40" trigger="hover" placement="top">
                                      <p>{{ scope.row.content }}</p>
                                      <div slot="reference">
                                          <span v-if="scope.row.content.length > 40">{{ scope.row.content.substr(0, 40) }}...</span>
                                          <span v-else>{{ scope.row.content }}</span>
                                      </div>
                                  </el-popover>
                              </div>
                            </template>
                        </el-table-column><!--模板内容-->
                        <el-table-column align="left" :label="$t('collection.lastEdit')" min-width="120"><!--最近一次编辑-->
                            <template slot-scope="scope">{{ scope.row.updateTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column align="left" :label="$t('common.status')" min-width="120"><!--状态-->
                            <template slot-scope="{row}">
                                <el-switch @change="changeStatus(row)" v-model="row.status" :disabled="row.smsType === 'LOGIN_CODE' || row.smsType === 'UPDATE_PASSWORD_CODE'||row.smsType === 'OLDUSER_CREATE_ORDER'"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" :label="$t('common.operation')" min-width="120"><!--操作-->
                            <template slot-scope="scope">
                                <el-button @click="edit(scope.row)" type="text">{{ $t('finance.edit') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--分页组件-->
                <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
            </div>
        </div>
        <!--编辑弹框-->
        <el-dialog :visible.sync="editDialog.showEditDialog" width="416px" :title="$t('common.SMSsend')">
            <el-form :model="editDialog.editForm" ref="editForm" :rules="editDialog.rules" label-width="135px">
                <el-form-item :label="$t('collection.templateName') + ' : '"><!--模板名称-->
                    <span>{{editDialog.editForm.smsType}}</span>
                </el-form-item>
                <el-form-item prop="content" :label="$t('collection.templateContent') + ' : '"><!--模板内容-->
                    <el-input v-model="editDialog.editForm.content" type="textarea" :rows="5" :maxlength="500"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button  @click="submitEdit" type="primary">{{$t('common.confirmOk')}}</el-button>
                <el-button @click="editDialog.showEditDialog = false" type="default">{{$t('common.cancel')}}</el-button>
            </div>
        </el-dialog>

        <!-- <el-dialog :visible.sync="channelDialog.showChannelDialog" width="416px" :title="$t('common.changeChannel')">
            <el-form :model="channelDialog.channelForm" ref="channelForm" :rules="channelDialog.rules" :label-width="formLabelWidth">
                <el-form-item prop="otpProviders" :label="$t('common.SMSVerificationCodeChannel') + ' : '">
                    <el-select v-model="channelDialog.channelForm.otpProviders" clearable :placeholder="$t('verify.plsChoose')" style="width: 100%">
                         <el-option v-for="(item,index) in allChannel.otpProviders" :key="index" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="noticeProviders" :label="$t('common.noticeSMSChannel') + ' : '">
                    <el-select v-model="channelDialog.channelForm.noticeProviders" clearable :placeholder="$t('verify.plsChoose')" style="width: 100%">
                         <el-option v-for="(item,index) in allChannel.noticeProviders" :key="index" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="channelDialog.showChannelDialog = false" type="default">{{$t('common.cancel')}}</el-button>
                <el-button @click="submitChangeChannel" type="primary">{{$t('common.confirmOk')}}</el-button>
            </div>
        </el-dialog> -->
        <!--渠道切换弹框-->
        <switch-channel :visible.sync="showChannelDialog" :handleOk="getTableData"/>
    </div>
</template>

<script src="./main.js"></script>

<style lang="scss">
    [data-page=operation-smsManage-autoSend] {
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
    }
</style>
